<template>
	<view class="profile-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<view class="avatar-section" @click="upload_avatar">
					<image 
						:src="baseInfo.avatar || defaultAvatar" 
						class="user-avatar"
						mode="aspectFill"
					/>
					<view class="avatar-badge">
						<text class="camera-icon">📷</text>
					</view>
				</view>
				
				<view class="user-details">
					<text class="user-name">{{ baseInfo.name || '未设置姓名' }}</text>
					<text class="user-account">账号：{{ baseInfo.phone || '未绑定' }}</text>
					<view class="auth-status">
						<view class="auth-badge" :class="{ 'verified': baseInfo.auth == 1 }">
							<text class="auth-text">{{ baseInfo.auth == 1 ? '已实名' : '未实名' }}</text>
						</view>
		  </view>	
		  </view>
	  </view>
	  
			<!-- 统计信息 -->
			<view class="stats-section">
				<view class="stat-item">
					<text class="stat-number">{{ memoCount || 0 }}</text>
					<text class="stat-label">备忘录</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ favoriteCount || 0 }}</text>
					<text class="stat-label">收藏</text>
				</view>
				<view class="stat-divider"></view>
				<view class="stat-item">
					<text class="stat-number">{{ registerDays || 0 }}</text>
					<text class="stat-label">使用天数</text>
				</view>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-section">
				<view class="menu-item" @click="profile">
					<view class="menu-icon personal">
						<text class="icon-text">👤</text>
					</view>
					<text class="menu-title">个人信息</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="account">
					<view class="menu-icon security">
						<text class="icon-text">🔒</text>
					</view>
					<text class="menu-title">账号与安全</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="dataManager">
					<view class="menu-icon data">
						<text class="icon-text">📊</text>
					</view>
					<text class="menu-title">数据管理</text>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<view class="menu-section">
				<view class="menu-item" @click="setting">
					<view class="menu-icon settings">
						<text class="icon-text">⚙️</text>
					</view>
					<text class="menu-title">设置</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="service_center">
					<view class="menu-icon service">
						<text class="icon-text">🎧</text>
					</view>
					<text class="menu-title">帮助与反馈</text>
					<text class="menu-arrow">›</text>
				</view>
				
				<view class="menu-item" @click="about">
					<view class="menu-icon about">
						<text class="icon-text">ℹ️</text>
					</view>
					<text class="menu-title">关于我们</text>
					<view class="version-info">
						<text class="version-text">v{{ version || '1.0.0' }}</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>
			
			<!-- 登出按钮 -->
			<view class="menu-section">
				<view class="menu-item logout-item" @click="logout">
					<view class="menu-icon logout">
						<text class="icon-text">🚪</text>
					</view>
					<text class="menu-title logout-text">退出登录</text>
				</view>
			</view>
		</view>

		<!-- 头像选择弹窗 -->
		<view class="avatar-modal" v-if="showAvatarModal" @click="closeAvatarModal">
			<view class="avatar-modal-content" @click.stop>
				<view class="modal-title">选择头像</view>
				<view class="avatar-grid">
					<!-- 默认头像选项 -->
					<view 
						class="avatar-option" 
						@click="selectAvatar('/static/images/logo.png')"
					>
						<image 
							src="/static/images/logo.png" 
							mode="aspectFill"
							class="avatar-preview"
						></image>
						<view class="avatar-name">默认头像</view>
					</view>
					
					<!-- 本地相册选择选项 -->
					<view 
						class="avatar-option" 
						@click="selectAvatar('choose_local')"
					>
						<view class="avatar-preview local-choose-icon">
							<text class="icon">📷</text>
						</view>
						<view class="avatar-name">选择照片</view>
					</view>
				</view>
				<view class="modal-actions">
					<button class="btn-cancel" @click="closeAvatarModal">取消</button>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
	import localStorage from '@/utils/storage.js'
  export default {
    data(){
      return {
		  
		  baseInfo: {
			  name:'',
			  phone:'',
			  avatar:'',
			  company_name:'',
			  registerDate:'',
			  login_code:'',
			  auth: 0,
		  },
		  version:"",
		  memoCount: 0,
		  favoriteCount: 0,
		  registerDays: 0,
		  showAvatarModal: false,
		  defaultAvatar: '/static/images/logo.png'
      }
    },
	onLoad() {
		// 先检查登录状态
		if (!this.checkLoginStatus()) {
			return; // 如果未登录则直接返回
		}
		this.getUserInfo();
		this.getStats();
		const that = this;
		uni.getSystemInfo({
			success: function (res) {
				that.version = res.appVersion || '1.0.0';
			}
		});
	}, 
	onShow() {
		// 检查登录状态
		if (!this.checkLoginStatus()) {
			return; // 如果未登录则直接返回
		}
		// 页面显示时刷新数据
		this.getUserInfo();
		this.getStats();
	},
	
	// 下拉刷新
	onPullDownRefresh() {
		if (this.checkLoginStatus()) {
			this.getUserInfo();
			this.getStats();
		}
		uni.stopPullDownRefresh();
	},
	
	
    methods: {
		checkLoginStatus() {
			// 检查登录状态
			if (!localStorage.isLoggedIn()) {
				uni.showModal({
					title: '提示',
					content: '请先登录',
					showCancel: false,
					success: () => {
						uni.navigateTo({
							url: '/pages/public/login'
						});
					}
				});
				return false;
			}
			return true;
		},
		
		upload_avatar(){
			// 显示头像选择弹窗，包含默认头像和本地相册选择
			this.showAvatarModal = true;
		},
		
		closeAvatarModal() {
			this.showAvatarModal = false;
		},
		
		selectAvatar(avatarPath) {
			if (avatarPath === 'choose_local') {
				// 选择本地图片
				this.chooseLocalImage();
			} else {
				// 选择默认头像
				this.updateAvatar(avatarPath);
			}
		},
		
		chooseLocalImage() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], // 使用压缩图片
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0];
					// 直接使用临时文件路径，不需要永久保存
					this.updateAvatar(tempFilePath);
				},
				fail: (err) => {
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					});
				}
			});
		},
		
		updateAvatar(avatarPath) {
			// 更新用户头像
			const updateResult = localStorage.updateUserInfo({ 
				avatar: avatarPath 
			});
			
			if (updateResult.success) {
				this.baseInfo.avatar = avatarPath;
				this.showAvatarModal = false;
				uni.showToast({
					title: '头像更新成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: '头像更新失败',
					icon: 'error'
				});
			}
		},
		
		getUserInfo() {
			const currentUser = localStorage.getCurrentUser();
			if (currentUser) {
				this.baseInfo = {
					name: currentUser.name || currentUser.nickname || '用户',
					phone: currentUser.phone || '未绑定',
					avatar: currentUser.avatar || this.defaultAvatar,
					auth: 1, // 假设都已实名
					registerDate: currentUser.createTime
				};
				this.calculateRegisterDays();
			} else {
				// 如果没有登录用户，显示默认信息
				this.baseInfo = {
					name: '游客用户',
					phone: '未登录',
					avatar: this.defaultAvatar,
					auth: 0,
					registerDate: new Date().toISOString()
				};
			}
		},
		
		getStats() {
			// 使用本地存储获取统计信息
			const statsResult = localStorage.getStats();
			if (statsResult.success) {
				this.memoCount = statsResult.data.totalMemos || 0;
				this.favoriteCount = statsResult.data.importantMemos || 0; // 用重要备忘录作为收藏
			} else {
				// 如果获取失败，设置默认值
				this.memoCount = 0;
				this.favoriteCount = 0;
			}
		},
		
		calculateRegisterDays() {
			if (this.baseInfo.registerDate) {
				const register = new Date(this.baseInfo.registerDate);
				const now = new Date();
				const diff = now - register;
				this.registerDays = Math.floor(diff / (1000 * 60 * 60 * 24));
			}
		},
		
		dataManager() {
			uni.navigateTo({
				url: '/pages/my/data/index'
			});
		},
		
		service_center(){
			uni.navigateTo({
				url: '/pages/my/about/feedback'
			});
		},
		
		profile(){
			uni.navigateTo({
				url: '/pages/my/profile/index'
			});
		},
		
		account(){
			uni.navigateTo({
				url: '/pages/my/security/index'
			});
		},
		
		setting(){
			uni.navigateTo({
				url: '/pages/my/settings/index'
			});
		},
		
		about(){
			uni.navigateTo({
				url: '/pages/my/about/index'
			});
		},
		
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 执行登出操作
						localStorage.logout();
						
						uni.showToast({
							title: '已退出登录',
							icon: 'success'
						});
						
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/public/login'
							});
						}, 1500);
					}
				}
			});
		},
    }
  }
</script>

<style lang="scss" scoped>
.profile-container {
	width: 100%;
	min-height: 100vh;
	position: relative;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	z-index: 0;
}

.user-card {
	position: relative;
	z-index: 1;
	background: #ffffff;
	border-radius: 0 0 50rpx 50rpx;
	padding: 100rpx 40rpx 50rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 50rpx;
}

.avatar-section {
	position: relative;
	margin-right: 30rpx;
	cursor: pointer;
}

.user-avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 80rpx;
	border: 8rpx solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
}

.avatar-section:active .user-avatar {
	transform: scale(0.95);
}

.avatar-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 52rpx;
	height: 52rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 26rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4rpx solid #fff;
	box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.4);
}

.camera-icon {
	font-size: 24rpx;
}

.user-details {
	flex: 1;
}

.user-name {
	display: block;
	font-size: 40rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 12rpx;
}

.user-account {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 18rpx;
}

.auth-status {
	display: flex;
}

.auth-badge {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	color: #fff;
	padding: 10rpx 24rpx;
	border-radius: 25rpx;
	font-size: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
}

.auth-badge.verified {
	background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
	box-shadow: 0 4rpx 12rpx rgba(81, 207, 102, 0.3);
}

.auth-text {
	font-size: 24rpx;
	font-weight: 500;
}

.stats-section {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 40rpx 0 20rpx;
	border-top: 1rpx solid rgba(102, 126, 234, 0.1);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-number {
	font-size: 42rpx;
	font-weight: 700;
	color: #667eea;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 26rpx;
	color: #666;
}

.stat-divider {
	width: 2rpx;
	height: 80rpx;
	background: linear-gradient(to bottom, transparent, rgba(102, 126, 234, 0.3), transparent);
}

.menu-list {
	position: relative;
	z-index: 1;
	padding: 0 30rpx;
}

.menu-section {
	background: #ffffff;
	border-radius: 25rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 35rpx 30rpx;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: rgba(102, 126, 234, 0.05);
	transform: scale(0.98);
}

.menu-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 28rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.menu-icon.personal {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.menu-icon.security {
	background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.menu-icon.data {
	background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.menu-icon.settings {
	background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.menu-icon.service {
	background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.menu-icon.about {
	background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.icon-text {
	font-size: 40rpx;
}

.menu-title {
	flex: 1;
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

.version-info {
	margin-right: 20rpx;
}

.version-text {
	font-size: 26rpx;
	color: #999;
}

.menu-arrow {
	font-size: 36rpx;
	color: #ccc;
}

/* 登出按钮样式 */
.logout-item {
	background: #ffffff !important;
	border-radius: 25rpx;
}

.logout-item:active {
	background: rgba(102, 126, 234, 0.05) !important;
}

.menu-icon.logout {
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.logout-text {
	color: #333;
}

/* 头像选择弹窗样式 */
.avatar-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.avatar-modal-content {
	width: 80%;
	max-width: 500rpx;
	background: #fff;
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
}

.modal-title {
	text-align: center;
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 40rpx;
}

.avatar-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30rpx;
	margin-bottom: 40rpx;
}

.avatar-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border-radius: 20rpx;
	transition: all 0.3s ease;
	cursor: pointer;
}

.avatar-option:active {
	transform: scale(0.95);
	background: rgba(102, 126, 234, 0.1);
}

.avatar-preview {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 3rpx solid #ddd;
	object-fit: cover;
}

.local-choose-icon {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 3rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.local-choose-icon .icon {
	font-size: 50rpx;
	color: white;
}

.avatar-name {
	margin-top: 15rpx;
	font-size: 26rpx;
	color: #666;
	text-align: center;
}

.modal-actions {
	display: flex;
	justify-content: center;
}

.btn-cancel {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border: none;
	border-radius: 50rpx;
	padding: 20rpx 60rpx;
	font-size: 28rpx;
	box-shadow: 0 6rpx 20rpx rgba(102, 126, 234, 0.3);
}
</style>
